<script setup>
import Card from './Card.vue'
import CardTitle from './CardTitle.vue'
import CardEyebrow from './CardEyebrow.vue'
import CardDescription from './CardDescription.vue'
import CardCta from './CardCta.vue'
import { formatDate } from '@/Components/Spotlight/utils/formatDate.js'

defineProps({
  article: {
    type: Object,
    required: true
  }
})
</script>

<template>
  <article class="md:grid md:grid-cols-4 md:items-baseline">
    <Card class="md:col-span-3">
      <CardTitle :href="article.href ?? `/articles/${article.slug}`">
        {{ article.title }}
      </CardTitle>
      <CardEyebrow
        as="time"
        :dateTime="article.date"
        class="md:hidden"
        decorate
      >
        {{ formatDate(article.date) }}
      </CardEyebrow>
      <CardDescription>{{ article.description }}</CardDescription>
      <CardCta>{{ article.cta || '阅读全文' }}</CardCta>
    </Card>
    <CardEyebrow
      as="time"
      :dateTime="article.date"
      class="mt-1 max-md:hidden text-sm text-zinc-500 dark:text-zinc-400"
    >
      {{ formatDate(article.date) }}
    </CardEyebrow>
  </article>
</template>
